<!-- <script setup lang="ts">
import { ref, reactive } from "vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import { currentGET } from "@/api";

const config = ref({
  showValue: true,
  unit: "次",
});
const data= ref([])
const getData = () => {
  currentGET("rightCenter").then((res) => {
    console.log("报警排名", res);
    if (res.success) {
      data.value =res.data;
    } else {
      window["$message"]({
        text: res.msg,
        type: "warning",
      });
    }
  });
};
getData();
</script>

<template>
  <div class="right_bottom">
    <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data"/>
  </div>
</template>

<style scoped lang="scss">

.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
}
</style> -->
<template>
  <div id="main">

  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const chart = ref();
onMounted(() => { 
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById('main')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09'],
      axisLine: {
        lineStyle: {
          color: '#1a8adf',    // 坐标轴线线的颜色
          type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        },
      },
      splitLine: {  // 横向网格线设置
        show: true, // 显示网格线
        lineStyle: {
          color: 'rgba(102, 153, 255, 0.7)', // 设置网格线颜色为浅黄色
          type: 'solid', // 设置网格线类型为实线
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#1a8adf',    // 坐标轴线线的颜色
          type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）

        },
        
      },
      axisTick: {
        length:10 , // 调整刻度线长度
      },
      splitLine: {  // 纵向网格线设置
        show: true, // 显示网格线
        lineStyle: {
          color: 'rgba(102, 153, 255, 0.7)', 
          type: 'solid', // 设置网格线类型为实线
        },
      },
    },
    series: [
      {
        data: [500, 800, 960, 380, 610, 420, 700],
        type: 'line',
        areaStyle: {
          color:'rgba(155, 220, 237, 0.5)',
          //color: '#FFED97', // 设置面积填充颜色为浅黄色
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' }, // 标记最大值
            { type: 'min', name: '最小值' }, // 标记最小值
          ],
        },
      }
    ]
  };
  option && myChart.setOption(option);
})


</script>

<style>
#main {
  margin-top:-40px;
  width: 100%;
  height: 320px;
}
</style>